<template>
	<view class="container" :data-theme="themeStyle">
		<view class="empty-box"></view>
		<view class="transfer-form">
			<view class="row">
				<view class="row-title">用户手机号</view>
				<view class="mobile-row">
					<input class="input mobile" placeholder-class="input-placeholder" placeholder="请输入用户平台注册手机号"
						type="text" v-model="formData.mobile" />
					<view class="mobile-butt" @click="checkMobile">检测</view>
				</view>
				<view class="mobile-check" v-if="checkResult && checkResult.code == 0">
					<view class="check-result">检测成功！</view>
					<view class="user-name">用户昵称：{{checkResult.data.nickname}}</view>
				</view>
				<view class="mobile-check" v-if="checkResult && checkResult.code != 0">
					<view class="check-result">{{checkResult.message}}</view>
				</view>
			</view>
		</view>
		
		<view class="withdraw-wrap">
			<view class="withdraw-wrap-title">转账金额：</view>
			<view class="money-wrap">
				<text class="unit">￥</text>
				<input type="digit" class="withdraw-money" v-model="withdrawMoney" />
				<view class="delete" @click="remove" v-if="withdrawMoney">
					<image :src="$util.img('upload/uniapp/member/apply_withdrawal/close.png')" mode="widthFix"></image>
				</view>
			</view>
			<view class="bootom">
				<view>
					<text class="color-tip">可转账消费券：￥{{ withdrawInfo.member_info.balance_money | moneyFormat }}</text>
				</view>
			</view>
		</view>

		<view class="btn color-base-border ns-gradient-otherpages-member-widthdrawal-withdrawal" :data-theme="themeStyle"
		 :class="{ disabled: withdrawMoney == '' || withdrawMoney == 0 }" @click="withdraw">
			转账
		</view>

		<view class="recoend" @click="toWithdrawal">
			<view class="recoend-con">消费券明细</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import globalConfig from '@/common/js/golbalConfig.js';
	export default {
		data() {
			return {
				withdrawInfo: {
					config: {
						is_use: 0,
						min: 1,
						rate: 0
					},
					member_info: {
						balance_money: 0,
						balance_withdraw: 0,
						balance_withdraw_apply: 0
					}
				},
				bankAccountInfo: {},
				withdrawMoney: '',
				isSub: false,
				to_mobile: '',
				to_member_id: '',
				checkResult:'',
				formData:{
					mobile:'',
					fenxiao_name:'',
					sup_mobile:'',
					level_id:''
				}
			};
		},
		mixins: [globalConfig],
		onShow() {
			if (uni.getStorageSync('token')) {
				this.getWithdrawInfo();
			} else {
				this.$util.redirectTo('/otherpages/login/login/login', {
					back: '/otherpages/transfer/transfer'
				});
			}
		},
		methods: {
			toWithdrawal() {
				this.$util.redirectTo('/otherpages/member/balance_detail/balance_detail');
			},
			//全部转账
			allTx() {
				this.withdrawMoney = this.withdrawInfo.member_info.balance_money;
			},

			// 删除转账金额
			remove() {
				this.withdrawMoney = '';
			},
			/**
			 * 获取转账信息
			 */
			getWithdrawInfo() {
				this.$api.sendRequest({
					url: '/api/memberwithdraw/info',
					success: res => {
						if (res.code >= 0 && res.data) {
							this.withdrawInfo = res.data;
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			verify() {
				if (this.to_member_id == '') {
					this.$util.showToast({
						title: '请输入核对转账用户信息'
					});
					return false;
				}
				if (this.withdrawMoney == '' || this.withdrawMoney == 0 || isNaN(parseFloat(this.withdrawMoney))) {
					this.$util.showToast({
						title: '请输入转账金额'
					});
					return false;
				}
				if (parseFloat(this.withdrawMoney) > parseFloat(this.withdrawInfo.member_info.balance_money)) {
					this.$util.showToast({
						title: '转账金额超出可转账金额'
					});
					return false;
				}
				return true;
			},
			checkMobile() {
				this.to_member_id = 0;
				this.$api.sendRequest({
					url: '/membertransfer/api/membertransfer/testingUser',
					data: {
						phone: this.formData.mobile
					},
					success: res => {
						this.checkResult = res;
						if (res.code == 0) {
							this.to_member_id = res.data.member_id;
						}
					}
				});
			},
			withdraw() {
				if (this.verify()) {
					this.$api.sendRequest({
						url: '/membertransfer/api/membertransfer/transfer',
						data: {
							to_member_id: this.to_member_id,
							apply_money: this.withdrawMoney
						},
						success: res => {
							if (res.code >= 0) {
								this.$util.showToast({
									title: '转账成功'
								});
								setTimeout(() => {
									this.$util.redirectTo('/otherpages/member/balance/balance', {}, 'redirectTo');
								}, 1000);
							} else {
								this.isSub = false;
								this.$util.showToast({
									title: res.message
								});
							}
						},
						fail: res => {
							this.isSub = false;
						}
					});
				}
			},
			
		},
		filters: {
			/**
			 * 金额格式化输出
			 * @param {Object} money
			 */
			moneyFormat(money) {
				return parseFloat(money).toFixed(2);
			}
		}
	};
</script>

<style lang="scss">
	.container {
		width: 100vw;
		height: 100vh;
		background: #fff;
	}

	.empty-box {
		height: 20rpx;
	}

	.bank-account-wrap {
		margin: 0 20rpx;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #f7f7f7;
		position: relative;

		.tx-wrap {
			display: flex;
			justify-content: space-between;
			margin-right: 60rpx;

			.tx-bank {
				margin-right: 60rpx;
				flex: 1;
				margin-left: 10rpx;
				text-align: right;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.tx-img {
				position: absolute;
				right: 100rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.iconfont {
			position: absolute;
			right: 40rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.withdraw-wrap {
		margin: 0 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: rgba(110, 110, 110, 0.09) 0 0 20rpx 0;

		.money-wrap {
			padding: 20rpx 0;
			border-bottom: 1px solid #eee;
			display: flex;

			.unit {
				font-size: 60rpx;
				line-height: 1;
			}

			.withdraw-money {
				height: 60rpx;
				line-height: 1;
				min-height: 60rpx;
				padding-left: 20rpx;
				font-size: 60rpx;
				flex: 1;
				font-weight: bolder;
			}

			.delete {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.bootom {
			display: flex;
			padding-top: 20rpx;

			text {
				line-height: 1;
				flex: 2;
			}

			.all-tx {
				padding-left: 10rpx;
			}
		}
	}

	.btn {
		margin: 0 30rpx;
		margin-top: 60rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		color: #fff;
		text-align: center;

		&.disabled {
			background: #ccc;
			border-color: #ccc;
			color: #fff;
		}
	}

	.recoend {
		margin-top: 40rpx;

		.recoend-con {
			text-align: center;
		}
	}

	.desc {
		font-size: $font-size-tag;
		color: #999;
	}
	
	@import '@/common/css/mixins.scss';
	.transfer-form {
		margin: 30rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: rgba(110, 110, 110, 0.09) 0 0 20rpx 0;
		
		.row {
			margin-bottom: 48rpx;
		
			.row-title {
				margin-bottom: 24rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #000000;
				line-height: 46rpx;
			}
			.mobile-row {
				@include flex(space-between);
				background: #F8F8F8;
				border-radius: 8rpx;
			
				.mobile-butt {
					@include flex;
					width: 128rpx;
					height: 72rpx;
					border-radius: 8rpx;
					font-size: 28rpx;
			
					background: #FF4544;
					color: #FFFFFF;
					line-height: 40rpx;
				}
			}
			
			.mobile-check {
				@include flex(flex-start);
				margin-top: 24rpx;
			
				.check-result,
				.user-name {
					font-size: 28rpx;
					color: #FF4544;
					line-height: 40rpx;
				}
			
				.user-name {
					color: #909399;
				}
			}
		}
	}
	
</style>
